<template>
  <div class="shop-info-item">
    <div v-if="$props.shop && $props.shop.id>0" class="shop-info-item-outer">
      <div class="logo-box">
        <img :src="shop.logo" @click="getDetail()"/>
      </div>
      <div class="name-box">
        <div class="line1">
          <span class="name"  @click="getDetail()" v-text="shop.name"></span>
          <span class="status-box" v-text="shop.businessStatus.name+(
            shop.businessStatus.id===0 && (shop.businessStopInfo && shop.businessStopInfo.length>0)?'..':''
          )" :class="'status-'+shop.businessStatus.id" @click="showStopInfo"></span>
        </div>
        <div class="line2">
          <div class="chat" @click="chat()">
            <i class="iconfont icon-kefu"></i>
            <span>客服</span>
          </div>
          <span class="same-city-send" v-if="shop.isSameCitySend">同城配送</span>
          <button class="collect-button" @click="collectShop" v-text="isCollect?'已收藏':'收藏'" :disabled="collecting"></button>
        </div>
      </div>
    </div>
    <div class="shop-nums-info">
      <div class="collect-nums" v-text="'收藏人数: '+shop.collectNums"></div>
      <div class="product-nums" v-text="'商品数量: '+shop.productNums"></div>
      <div class="distance" @click="$router.push({
        name:'MyAMapLine',
        query:{
          endLocation:shop.location.join(',')
        }
        })">距离: <el-tag type="warning" style="text-decoration: underline" v-text="(shop.distance*0.001).toFixed(2)+'km'"></el-tag></div>
    </div>
    <div class="score-box" v-if="$props.showScore">
      <div class="item">
        <span>服务:</span>
        <el-rate
          class="score-item"
        v-model="(shop.score*0.05).toFixed(2)-0"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}">
      </el-rate>
        <div class="c"></div>
      </div>
      <div class="item">
        <span>物流:</span>
        <el-rate
          class="score-item"
          v-model="(shop.expressScore*0.05).toFixed(2)-0"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}">
        </el-rate>
        <div class="c"></div>
      </div>
    </div>
    <div v-if="!$props.shop || !$props.shop.id">
      暂无店铺信息
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopInfoItem',
  props:{
    showScore:Boolean,
    shop:Object
  },
  data:function () {
    return {
      collecting:false,
      isCollect:false,
    }
  },
  mounted () {
    this.isCollectShop()
  },
  methods:{
    showStopInfo:function () {
      if (!(this.shop.businessStatus.id===0 || this.shop.businessStatus.id===2)){
        return
      }
      if (!this.shop.businessStopInfo){
        return
      }
      this.$msgbox({
        title: '停业公告',
        message: this.shop.businessStopInfo,
        showConfirmButton: false
      })
    },
    chat:function () {
      let $this=this
      if ($this.$route.query.onlyH5){
        $this.$message.warning('请您下载App进行正式功能体验')
        return
      }
      $this.checkLoginAct(function () {
        $this.$router.push({
          name:"Chat",
          query:{
            shopId:$this.$props.shop.id
          }
        })
      })
    },
    // 获取店铺详情
    getDetail:function () {
      if (this.$route.name!=='ShopHome'){
        this.$router.push({
          name:"ShopHome",
          query:{
            id:this.$props.shop.id
          }
        })
      }
    },
    // 是否-关注店铺
    isCollectShop:function () {
      let $this=this
      if (!$this.CurrUser.IsLogin()){
        return;
      }
      $this.collecting=true
      $this.MyRequest($this.ApiDoNameMember + 'Member/isCollectShop', {
        id: $this.$props.shop.id
      }, function (isCollect) {
        $this.collecting = false
        $this.isCollect = isCollect
        $this.$forceUpdate()
      }, function (data) {
        $this.collecting = false
        $this.successTip(data.message, 'error')
      })
    },
    // 关注-店铺
    collectShop:function () {
      let $this=this
      if ($this.$route.query.onlyH5){
        $this.$message.warning('请您下载App进行正式功能体验')
        return
      }
      $this.checkLoginAct(function () {
        $this.collecting=true
        $this.MyRequest($this.ApiDoNameMember + 'Member/collectShop', {
          id: $this.$props.shop.id
        }, function (isCollect) {
          $this.collecting = false
          $this.isCollect = isCollect
          if (isCollect===true){
            $this.$props.shop.collectNums++
          }else{
            $this.$props.shop.collectNums--
          }
          $this.$forceUpdate()
        }, function (data) {
          $this.collecting = false
          $this.successTip(data.message, 'error')
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
